<template>
  <div class="padding-top-bottom-20 padding-left-right-40">
    <el-tabs v-model="activeName" @tab-click="tabClick">
      <el-tab-pane label="基本信息" name="info">
        <base-info ref="info" @setCCmanagerName="setCCmanagerName"></base-info>
      </el-tab-pane>
      <template v-if="$route.query.key">
        <el-tab-pane label="抄送表单" name="formenus">
          <form-menu ref="formenus" :process-name="processName"></form-menu>
        </el-tab-pane>
      </template>
    </el-tabs>
  </div>
</template>

<script>
  import merge from 'webpack-merge';
  import manageBaseInfo from './ccManageBaseInfo';
  import BaseInfo from './ccManageBaseInfo';
  import formMenu from './formMenu';
  export default {
    name: 'ccManageDetil',
    data() {
      return {
        activeName: 'info',
        processName: '',
      };
    },
    mounted() {
      this.setActiveName();
    },
    methods: {
      tabClick() {
        this.changeType(this.activeName);
        this.$nextTick(() => {
          this.$refs[this.activeName].getInfo();
        });
      },

      //设置ActiveName
      setActiveName() {
        if (!this.$route.query.tab) {
          this.changeType('info');
        }
        this.activeName = this.$route.query.tab;
        this.$nextTick(() => {
          if (this.$route.query.key) {
            this.$refs[this.activeName].getInfo();
          }
        });
      },
      //更新路由参数
      changeType(name) {
        this.$router.replace({
          query: merge(this.$route.query, { tab: name }),
        });
      },
      setCCmanagerName(res) {
        this.processName = res;
      },
    },
    components: {
      BaseInfo,
      formMenu,
    },
  };
</script>

<style scoped>
::v-deep .el-form-item__label{
    padding-left: 0;
  }
</style>
